<!--收费单列表-->
<template>
  <div class="GenerateBillList"
       v-loading="loading"
       element-loading-customClass="ne-loading"
       element-loading-background="rgba(255, 255, 255, 0.6)"
  >
    <DicTable
        height="100%"
        stripe
        highlight-current-row
        highlight-hover-row
        max-height="600"
        ref="GBLtable"
        border
        header-row-class-name="header-row-class"
        row-class-name="ne-row-class"
        :columnData="GBLtbs.tableColumns"
        :tableData="GBLtbs.tableData"
        :loading="GBLtbs.tableLoading"
        :currentPage="~~GBLtbs.tablePage.pageIndex"
        :pageSize="~~GBLtbs.tablePage.pageSize"
        :totalResult="~~GBLtbs.tablePage.rowCount"
        :pager="true"
        @cell-click="cellClickEvent"
        @on-page-change="handlePageChange"
    >
    </DicTable>
    <el-dialog class="" append-to-body  width="98%" top='3vh' title="收费单" v-if="dialogVisible" :visible.sync="dialogVisible">
       <GenerateBillInfo :show.sync="dialogVisible" :rowInfo="rowInfo" :allInfo="{...CTOInfo,...ODKInfo}"></GenerateBillInfo>
    </el-dialog>
  </div>
</template>
<script>
import GenerateBillInfo from "@/components/custorder/pengding/GenerateBillInfo";
import DicTable from "@/components/public/DicTable";
import CustOrderService from "@/api/order/CustOrderService";
export default {
  name: "GenerateBillList",
  data() {
    return {
      loading: false,
      rowInfo: {},
      dialogVisible: false,
      GBLtbs: {
        tableColumns: [
          { field: "custSoNumber", title: "流水号"},
          { field: "custName", title: "客户名称", width: '16%'},
          { field: "accountUnitName", title: "收款单位"},
          { field: "contactCd", title: "合同编码"},
          { field: "contactName", title: "联系人"},
          { field: "officePhone", title: "联系电话"},
          { field: "audFlag", title: "审核状态"},
          { field: "staffName", title: "审核人"},
          { field: "audDate", title: "审核日期"},
          { field: "startBillDate", title: "进账日期"},
          { field: "checkFlag", title: "收费情况"},
          { field: "getDate", title: "收款日期"},
          { field: "moneyRmb", title: "收费金额"}
        ],
        tableData:  [],
        tableLoading: false,
        tablePage: {
          pageIndex: 1,
          pageSize: 10,
          rowCount: 0,
        },
      }
    }
  },
  props: {
    ODKInfo: {
      type: Object
    },
    CTOInfo: {
      type: Object
    }
  },
  mounted() {

  },
  created() {
    this.getDetail();
  },
  components: {DicTable,GenerateBillInfo},
  methods: {
    async getDetail(){
      this.loading = true;
      let{custOrderId,custSoNumber,offerType,custId} = this.CTOInfo,
          pageInfo={
            pageIndex: ~~this.GBLtbs.tablePage.pageIndex+'',
            pageSize: ~~this.GBLtbs.tablePage.pageSize+''
          },
          params = {custOrderId,custSoNumber,custId,prodType:offerType,pageInfo:pageInfo};
      const result = await CustOrderService.qryGenerateBillList(params);
      this.loading = false;
      if(result.meta.resultCode=='0' || !result.meta.resultCode){
        this.GBLtbs.tableData = result.meta.acctItemBills;
        this.GBLtbs.tablePage = {
              pageIndex: ~~Number(result.meta.pageInfo.pageIndex),
              pageSize: ~~Number(result.meta.pageInfo.pageSize),
              rowCount: ~~Number(result.meta.pageInfo.rowCount)
        };
      }else{
        this.$message({
          showClose: true,
          message: result.meta.resultMsg,
          type: 'error'
        });
      };
    },
    handlePageChange({ currentPage, pageSize }) {
      
      this.GBLtbs.tablePage.pageIndex = currentPage;
      this.GBLtbs.tablePage.pageSize = pageSize;
      this.getDetail();
    },
    // 行点击事件
    cellClickEvent () {
      this.rowInfo = arguments[0].row;
      this.dialogVisible = true;
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
